<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>mr. hurley | personal blog</title>
	<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
	<header id="site_head">	<!-- 定义背景图像，整体的高宽 -->	<!--height: 70px; width: 100%; display: block;-->
	
		<div class="header_cont"><!-- useful to create the 960px limit -->
		
			<h1><a href="#">mr. hurley</a></h1>	<!--LOGO向左侧浮动，text-indent:-9999px;-->

			<nav class="head_nav">				<!--NAV 向右侧浮动-->
			<ul>
				<li class="rss"><a href="#">Subscribe</a></li>
				<li class="twitter"><a href="#">Follow Me</a></li>
				<li class="home"><a href="#">Home</a></li>
				<li><a href="#">About Me</a></li>
				<li><a href="#">Portfolio</a></li>
				<li><a href="#">Contact</a></li>
			</ul>
			</nav>
		</div>
	</header><!--/ id="site_head"-->

	<div id="main_content"><!--useful to create the 960px limit-->

			<section id="last_posts"><!--section for recent posts-->
			<header class="section_tit">
				<h3>Last posts</h3>
			</header>

				<div class="single_post"> <!--single post container width: 447px;-->
					<article>
					<div class="single_post__brief float"> <!-- 向左侧浮动 width: 180px;-->
						<figure>
							<img class="single_post__brief__img" src="images/test3.jpg" alt="test"/>
						</figure>
						<footer>
							<ul>
								<li><time datetime="2010-04-14" pubdate>April 14, 2010</time></li>
								<li>written by <a href="#">Mr. Hurley</a></li>
								<li>posted in <a href="#">Web Design</a>, <a href="#">Article</a></li>
								<li><a href="#">Comments (15)</a></li>
							</ul>
						</footer>
					</div>

					<div class="art"> <!-- width = 250px + border 1px*2 + margin-left: 15px; = 267px -->
						<header class="post_head">
							<h2><a href="#">Options To Consider When Your Client Is Driving You Mad</a></h2>
						</header>
						<p>I guess I would be speaking on your behalf when I say that I feel so grateful for my clients. After all, they put their trust in me and gladly compensate me for my efforts. I guess I would be...</p>
						<span class="more"><a href="#">Read more</a></span>
					</div>
					</article>

				</div>

				<div class="single_post"> <!-- float: left; -->
					<article>
					<div class="float">
						<figure>
							<img class="single_post__brief__img" src="images/test1.jpg" alt="test" />
						</figure>
						<footer>
							<ul>
								<li><time datetime="2010-04-14" pubdate>April 14, 2010</time></li>
								<li>written by <a href="#">Mr. Hurley</a></li>
								<li>posted in <a href="#">Web Design</a>, <a href="#">Article</a></li>
								<li><a href="#">Comments (15)</a></li>
							</ul>
						</footer>
					</div>

					<div class="art">
						<header class="post_head">
							<h2><a href="#">Purple In Web Design: A New Trend?</a></h2>
						</header>
						<p>For a long time purple has been the least used colour in web design. In recent months I noticed the number of websites...</p>
						<span class="more"><a href="#">Read more</a></span>
					</div>
					</article>
				</div>

				<div class="single_post"> <!-- float: left; -->
					<article>
					<div class="float">
						<figure>
							<img class="single_post__brief__img" src="images/test4.jpg" alt="test" />
						</figure>
						<footer>
							<ul>
								<li><time datetime="2010-04-14" pubdate>April 14, 2010</time></li>
								<li>written by <a href="#">Mr. Hurley</a></li>
								<li>posted in <a href="#">Web Design</a>, <a href="#">Article</a></li>
								<li><a href="#">Comments (15)</a></li>
							</ul>
						</footer>
					</div>

					<div class="art">
						<header class="post_head">
							<h2><a href="#">How To Design A Better Blog? Break Down The Rules</a></h2>
						</header>
						<p>Once upon a time in World Wide Web a private and personal diary, where recording daily activities and reflections, called Weblog. </p>
						<span class="more"><a href="#">Read more</a></span>
					</div>
					</article>
				</div>

				<div class="single_post"> <!-- float: left; -->
					<article>
					<div class="float">
						<figure>
							<img class="single_post__brief__img" src="images/test2.jpg" alt="test" />
						</figure>
						<footer>
							<ul>
								<li><time datetime="2010-04-14" pubdate>April 14, 2010</time></li>
								<li>written by <address><a href="#">Mr. Hurley</a></address></li>
								<li>posted in <a href="#">Web Design</a>, <a href="#">Article</a></li>
								<li><a href="#">Comments (15)</a></li>
							</ul>
						</footer>
					</div>

					<div class="art">
						<header class="post_head">
							<h2><a href="#">Options To Consider When Your Client Is Driving You Mad</a></h2>
						</header>
						<p>I guess I would be speaking on your behalf when I say that I feel so grateful for my clients.</p>
						<span class="more"><a href="#">Read more</a></span>
					</div>
					</article>
				</div>

			</section>

	</div>

</body>
</html>